<template>
    <!-- 加入tabbar组件 -->
    <TabBar>
      <!-- 插槽方式添加tab -->
      <!-- 有多少个tabitem就引入多少个tabitem组件,tabitem组件内部预留两个插槽显示图片和图片描述 -->
      <TabBarItem view-src="/home">
        <template v-slot:tabitem-icon>
          <img src="@/assets/imgs/tabbar/home.svg" alt="">
        </template>
        <template v-slot:tabitem-text>
          <div>首页</div>
      </template>
      </TabBarItem>
      <TabBarItem view-src="/message">
         <template v-slot:tabitem-icon>
           <img src="@/assets/imgs/tabbar/message.svg" alt="">
        </template>
         <template v-slot:tabitem-text>
          <div>信息</div>
      </template>
      </TabBarItem>
      <TabBarItem view-src="/shopping">
        <template v-slot:tabitem-icon>
          <img src="@/assets/imgs/tabbar/shopping.svg" alt="">
        </template>
        <template v-slot:tabitem-text>
          <div>收藏</div>
        </template>
      </TabBarItem>
      <TabBarItem view-src="/me">
        <template v-slot:tabitem-icon>
          <img src="@/assets/imgs/tabbar/me.svg" alt="">
        </template>
        <template v-slot:tabitem-text>
          <div>我的</div>
        </template>
      </TabBarItem>
    </TabBar>
</template>
<script>
import TabBar from '@/components/tabbar/Tabbar';
import TabBarItem from '@/components/tabbar/TabBarItem';
export default {
    name:'MainTabBar',
    components:{
        TabBar,
        TabBarItem
    }
}
</script>
<style scoped>

</style>